<template>
  <div class="date-container">
    <p class="date-text">{{ curYear }} 年 {{ curMonth }} 月 {{ curDay }} 日</p>
    <!-- <p class="date-text">第 {{ dayOfYear }} 天</p> -->
    <!-- <p class="date-text">第 {{ weekOfYear }} 周</p> -->
    <p class="date-text">{{ lunarDay }} {{ curWeek }}</p>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { getLunar } from "chinese-lunar-calendar";

const curYear = ref(""); // 当前年份
const curMonth = ref(""); // 当前月份
const curDay = ref(""); // 当前日期
const curWeek = ref(""); // 当前周
const lunarDay = ref(""); // 农历日期
const dayOfYear = ref(""); // 当前日期是一年中的第几天
const weekOfYear = ref(""); // 当前日期是一年的第几周

onMounted(() => {
  // 初始化日历
  const date = new Date();
  curYear.value = date.getFullYear();
  curMonth.value = date.getMonth() + 1;
  curDay.value = date.getDate();

  const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const day = date.getDay();
  curWeek.value = weekday[day];

  const lunarDate = getLunar(curYear.value, curMonth.value, curDay.value);
  lunarDay.value = lunarDate.dateStr;
  // 获取当前时间是当年的第几天
  dayOfYear.value = Math.floor(
    (date - new Date(curYear.value, 0, 0)) / 86400000
  );
  // 获取当前时间是当年的第几周
  const start = new Date(curYear.value, 0, 1);
  weekOfYear.value = Math.ceil(
    ((date - start) / 86400000 + start.getDay() + 1) / 7
  );
});
</script>

<style lang="scss" scoped>
.date-container {
  display: flex;
  flex-direction: column; // 使子元素垂直排列
  align-items: center;
  justify-content: center;
  width: 300px; // 容器宽度
  max-width: 100%; // 最大宽度
  // background-color: #f0f0f0; // 背景色
  padding: 20px; // 内边距
  margin: 0 auto; // 水平居中
  border-radius: 8px; // 圆角
  box-shadow: 0 4px 8px rgb(0 0 0 / 10%); // 阴影效果
}

.date-text {
  margin: 5px 0; // 外边距
  font-family: Arial, sans-serif; // 字体
  font-size: 18px; // 字号
  white-space: nowrap; // 不换行
}
</style>
